<template>
	<view :style="{backgroundColor:backGround,width:'100%',borderBottom:boder}">
		<view class="huadong" :style="{backgroundColor:backGround,letterSpacing:letterSpacing,width:'100%' }">
			<view v-for="(item,index) in option" @click="itemClick(index)" class="partnersItems" :style="index == activeNum?`padding:${padding};border-bottom:${activeBorderBottom};margin:${margin}`:`padding:${padding};margin:${margin}`">
				<text :style="index==activeNum?`color:${activeColor};font-size:${fontSizeActive}`:`color:${color};font-size:${fontSize}`">{{item}} 
				<text v-if="isNumArray.length > 0">({{isNumArray[index]}})</text>
				</text>	
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			boder:{
				type:[Number, String,null],
				default:""
			},
			name:{//如果一个页面引用了多次组件,带入name,不同的name可以回调不同的操作
			 type:String,
			 default:""	
			},
			color:{//默认字体颜色
				type:String,
				default:"rgba(0, 0, 0, 0.6)"
			},
			backGround:{//背景颜色
				type:String,
				default:"transparent"
			},
			activeNum:{//当前选中的是第几项
				type:Number,
				default:0
			},
			activeColor:{//选中item的字体颜色
				type:String,
				default:"#181818"
			},
			activeBorderBottom:{//选中item的下边框样式
				type:String,
				default:"2px solid #465CFF"
			},
			datas:{//展示的数据
				type:Array,
				default(){
					return []
				}
			},
			isNumArray:{//每个Item后面的括号长度,isNumArray的长度需要和datas的长度一致
				type:Array,
				default(){
					return []
				}
			},
			datasName:{//展示的值的变量?针对用户传变量(数组中不是对象不需要使用此属性)
				type:String,
				default:""
			},
			fontSize:{//字体大小
				type:String,
				default:"0.9rem"
			},
			fontSizeActive:{//选中的字体大小
				type:String,
				default:"1rem"
			},
			letterSpacing:{//间距
				type:String,
				default:'1px'
			},
			padding:{//内边距
				type:String,
				default:"5px"
			},
			margin:{
				type:String,
				default:"0px 10px"
			}
		},
		watch:{
			datas:function(oldV,newVal){
				this.datas.length>0 ? this.dataProcessing(this.datas,this.datasName):""
			}
		},
		data(){
			return{
				option:[],//数据处理后,展示的字段
				optionNum:[],//数据的长度(isNumArray>0时生效)
			}
		},
		methods:{
			//数据处理,数据归一化
			dataProcessing(datas,datasName){
				if(!Array.isArray(datas)){
					throw new Error("组件传入datas必须为Array");
					return ;
				}
				if(Object.prototype.toString.call(datas[0]) === '[object Object]'){
					if(this.datasName.trim().length< 1){
						throw new Error("组件传入datas为Array[Object]时必须传入datasName属性指定展示字段");
					}else{//
						let option=[]
						for(let i=0;i<datas.length;i++){
							if(typeof datas[i][datasName]!='undefined' && this.datasName.trim().length > 0){
								option.push(datas[i][datasName])
								// option.push(datas[i][datasName])
								// option.push(datas[i][datasName])
								// option.push(datas[i][datasName])
							}
						}
						this.option=option
					}
				}else{
					this.option = datas
				}
				// console.log(this.option)
			},
			//当前用户点击的选项卡
			itemClick(index){
				this.name.trim().length < 1?this.$emit("itemSwitch",index):this.$emit("itemSwitch",index,this.name)
			},
		},
		created(){
			this.datas.length>0 ? this.dataProcessing(this.datas,this.datasName):""
		}
	}
</script>

<style scoped>
	.huadong{
		display: -webkit-inline-box;
		align-items: center;
		white-space: nowrap; 
		overflow-x: auto;background-color: #ffffff;
	}
	.huadong::-webkit-scrollbar{
		display: none;
	}
	.partnersItems{
		padding: 0px 5px;
		margin:0px 0px;
	}
	.partnersItems text{
		display: inline-block;
		text-align: center;
	}
</style>